<template>
  <transition enter-active-class="animated slideInUp" leave-active-class="animated slideOutRight">
    <div class="page-rent">
      <my-header head-title="付房租" goBack="true"></my-header>
      <div class="common-info">
        <div class="body-up">
          <p class="classP">500.00</p>
          <p class="classP">累计奖励金(元)</p>
        </div>
        <div class="body-up">
          <p class="classP">300.00</p>
          <p class="classP">可用奖励金(元)</p>
        </div>
      </div>
      <div>
        <span class="font">&nbsp;&nbsp;通联支付</span>
      </div>
      <div class="common-info">
        <div class="body-center">
          <router-link :to="{path: '/rent/contract', query:{userId: userId}}" class="myrent">
            <div class="body-center1">
              <p class="classP"><img src="static/image/contract2.png" width="30" height="25"></p>
              <p class="classP">合同</p>
            </div>
          </router-link>
          <router-link :to="{path: '/rent/order', query:{userId: userId}}" class="myrent">
            <div class="body-center1">
              <p class="classP"><img src="static/image/order1.png" width="25" height="25"></p>
              <p class="classP">订单</p>
            </div>
          </router-link>
          <div class="body-center1">
            <p class="classP"><img src="static/image/award2.png" width="30" height="25"></p>
            <p class="classP">奖励</p>
          </div>
        </div>
        <div class="body-center">
          <div class="body-center1">
            <p class="classP"><img src="static/image/coupon1.png" width="25" height="25"></p>
            <p class="classP">优惠券</p>
          </div>
          <div class="body-center1">
            <p class="classP"><img src="static/image/invite.png" width="30" height="25"></p>
            <p class="classP">邀请有奖</p>
          </div>
          <div class="body-center1" v-on:click="goshow">
            <p class="classP"><img src="static/image/service1.png" width="25" height="25"></p>
            <p class="classP">客服</p>
          </div>
        </div>
        <div id="audit" class="body-center" v-show="auditor">
          <div class="body-center1">
            <p class="classP"><img src="static/image/audit.png" width="30" height="25"></p>
            <p class="classP">审核</p>
          </div>
        </div>
      </div>
      <alert-tip v-if="showAlert" @closeTip="closeTip" :alertText="alertText"></alert-tip>
      <div class="popup hotline-popup" v-show="serviceShow">
        <div class="popupBg"></div>
        <div class="popup-wrap">
          <div class="popup-box">
            <div class="popup-cont">
              <p><a style="font-weight:inherit;" href="tel:95156">拨打  95156</a></p>
              <p><a style="font-weight:inherit;" href="tel:400-66-95156">400-66-95156</a></p>
            </div>
          </div>
          <div class="hotline-popup-btn">
            <a href="javascript:;" style="font-weight:inherit;" class="btn close" v-on:click="noshow">取消</a>
          </div>
          <div class="popup-align"></div>
        </div>
      </div>
      <router-view></router-view>
    </div>
  </transition>
</template>

<script>
  import {mapGetters} from 'vuex'
  import myHeader from '@/components/common/header/header'
  import alertTip from '@/components/common/alertTip'
  import 'animate.css/animate.css'
  export default {
    data(){
      return {
        showAlert: false,      //显示提示组件
        alertText: null,       //提示的内容
        showService: false,    //显示客服div
        goBack: false
      }
    },
    components: {
      myHeader,
      alertTip
    },
    computed: {
      ...mapGetters([
        'storeUserRent'
      ]),
      userId: function() {
        return this.$route.query.userId;
      },
      renter: function () {
        return this.storeUserRent.renter === null ? false : true;
      },
      auditor: function () {
        if (this.storeUserRent.auditor === '1' || this.storeUserRent.auditor === '2') {
          return true;
        }
        else {
          return false
        }
      },
      serviceShow: function () {
        return this.showService;
      }
    },
    mounted() {
      if (!this.storeUserRent.renter) {
        this.$store.dispatch('getRentUser', this.userId);
      }
    },
    methods: {
      closeTip() {
        console.log("this.goBack:", this.goBack);
        this.showAlert = false;
        if (this.goBack) {
          this.$router.go(-1);
        }
      },
      goshow() {
        // 显示客服div
        this.showService = true;
      },
      noshow() {
        // 隐藏客服div
        this.showService = false;
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import 'src/style/mixin';

  .page-rent{
    // position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f2f2f2;
    z-index: 202;
    padding-top: 1.95rem;
    p, span {
      font-family: Helvetica Neue,Tahoma,Arial;
    }
  }

  .common-info ul li .tit {
    padding-left: 12px;
    font-size: 16px;
  }

  .font {
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
    color: #3190e8;
  }

  .body-up{
    width: 50%;
    text-align: center;
    float: left;
    display: table;
    //margin-top: 20px;
    //margin-bottom: 30px;
    padding-top: 10px;
    padding-bottom: 20px;
    border: aliceblue solid 1px;
  }

  .body-center{
    width: 100%;
    text-align: left;
    float: left;
    display: table;
    //margin-top: 20px;
    //margin-bottom: 30px;
    //padding-bottom: 30px;
    //border: lavender solid 1px;
  }

  .body-center1{
    width: 33%;
    text-align: left;
    float: left;
    display: table;
    //margin-top: 30px;
    //margin-bottom: 30px;
    padding: 30px;
    //border: lavender solid 1px;
  }

  .classP{
    font-size: 12px;
    text-align: center;
  }

  .popup {
    overflow-y: scroll;
    color: #333;
  }

  .popupBg {
    background: #000 none repeat scroll 0 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    position: fixed;
    right: 0;
    top: 0;
    visibility: visible;
    z-index: 2000;
  }
  .popup-wrap {
    display: block;
    opacity: 1;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    visibility: visible;
    z-index: 2001;
    text-align: center;
  }
  .popup-align {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  .popup .popup-box {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    min-width: 400px;
    visibility: visible;
    opacity: 1;
    background: #fff;
    border-radius: 5px;
    padding-bottom: 0px;
  }
  .popup .popup-box .popup-tit {
    position: relative;
    text-align: center;
    background: #eee;
    border-bottom: 1px solid #e4ebec;
    padding: 0 26px;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    border-radius: 5px 5px 0 0;
  }
  .popup .popup-box .popup-tit .tl{
    text-align: left;
  }
  .popup .popup-box .popup-tit .close {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #000;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 30px;
    line-height: 24px;
    opacity: 0.2;
    text-decoration: none;
  }
  .popup .popup-box .popup-tit .close:hover {
    opacity: 0.4;
  }
  .popup .popup-box .popup-cont {
    padding: 20px 12px 0;
    line-height: 24px;
  }

  .popup .popup-box .popup-footer {
    margin-top: 20px;
    text-align: center;
  }
  .popup .popup-box .popup-footer .btn {
    display: inline-block;
    margin:0 10px;
    padding: 0 30px;
    /*background: #0188CC;*/
    /*color: #fff;*/
    font-size: 14px;
  }
  .popup .popup-box .popup-footer .btn-hollow {
    padding: 0 29px;
  }
  .popup .popup-box .popup-footer .btn:hover {
    /*background: #047dba;*/
  }
  .popup .popup-box .popup-footer .btn-cancel {
    background: #bbb;
  }
  .popup .popup-box .popup-footer .btn-cancel:hover {
    background: #999;
  }
  /*优化部分*/
  .popupBg {
    background: #000 none repeat scroll 0 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    position: fixed;
    right: 0;
    top: 0;
    visibility: visible;
    z-index: 2000;
  }
  .hotline-popup .popup-wrap {
    top: inherit;
  }
  .hotline-popup.popup .popup-box {
    width: 92.5%;
    max-width: inherit;
    min-width: inherit;
  }
  .hotline-popup.popup .popup-box .popup-cont {
    padding: 0;
    line-height: 48px;
  }
  .hotline-popup .popup-cont p {
    font-size: 18px;
    border-bottom: 1px solid #eaeaea;
    line-height: 54px;
    margin:0px;
  }
  .hotline-popup .popup-cont p a {
    display: block;
    font-weight: bold;
    color: #3a95fd;
  }
  .hotline-popup-btn {
    margin: 10px auto 0;
    width: 92.5%;
  }
  .hotline-popup-btn .btn {
    font-size: 18px;
    color: #3d96ff;
    line-height: 48px;
    font-weight: bold;
    background: #fff;
    display:block;
    border-radius:5px;
  }
  /*弹窗优化 end*/
</style>
